<template>
  <div class="app-container">
    <!-- 工具栏 -->
    <head-tool :show-before="true">
      <template #left>有 {{ attendInfo.tobeTaskCount }} 条考勤审批尚未处理</template>
      <template #right>
        <el-button size="mini" type="danger" @click="$router.push('/import?type=attendance')" >导入</el-button>
        <el-button size="mini" type="warning" @click="tipsDialogVisible = true">提醒</el-button>
        <el-button size="mini" type="primary" @click="handleSet">设置</el-button>
        <el-button size="mini" type="default" @click="$router.push('/attendances/archiving/')" >历史归档</el-button>
        <el-button size="mini" type="primary" @click="$router.push({ path: '/attendances/report/' + yearMonth })" >{{ yearMonth }}报表</el-button>
      </template>
    </head-tool>
    <el-card class="hr-block">
      <el-form ref="formData" :model="formData" label-width="120px" class="formInfo">
        <el-form-item label="部门:">
          <el-checkbox-group v-model="formData.deptID">
            <el-checkbox v-for="item in departments" :key="item.id" :label="item.name">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="考勤状态：">
          <el-radio-group v-model="formData.stateID">
            <el-radio v-for="item in stateData.holidayType" :key="item.id" :label="item.value" :value="item.value">
              {{ item.value }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 考勤列表 -->
    <el-card class="table">
      <el-table v-loading="loading" :data="list" style="width: 100% overflow-x: auto overflow-y: hidden" border @cell-click="show">
        <el-table-column prop="username" label="姓名" align=center width="100" fixed />
        <el-table-column prop="workNumber" label="工号" align=center width="100" fixed />
        <el-table-column prop="departmentName" label="部门" align=center width="120" fixed />
        <el-table-column prop="mobile" label="手机" align=center width="110" fixed />
        <el-table-column align=center v-for="(it, ind) in monthOfReport" :key="ind" :label="`${attendInfo.month}/${ind + 1}`" width="60">
          <template slot-scope="{ row }">
            <span v-if="row.attendanceRecord[ind].adtStatu === 1"> √ </span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 2">旷工</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 3">迟到</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 4">早退</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 5">外出</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 6">出差</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 7">年假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 8">事假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 9">病假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 10">婚假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 11">丧假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 12">产假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 13">奖励产假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 14">陪产假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 15">探亲假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 16">工伤假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 17">调休</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 18">产检假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 19">流产假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 20">长期病假</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 21">测试架</span>
            <span v-if="row.attendanceRecord[ind].adtStatu === 22">补假</span>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="centerDialogVisible" width="30%" center :show-close="false">
        <span slot="title" style="color: #fff">{{ attendInfo.name }} {{ attendInfo.month }} 月{{ attendInfo.getDate }} 日（实际工作日考勤方案）</span>
        <div class="attenInfo">
          <p class="colRed">注：统计考勤时，异常状态优先正常状态</p>
          <p class="check">
            <el-radio-group v-model="modifyData.adtStatu">
              <el-radio v-for="item in stateData.vacationtype" :key="item.id" :label="item.id" :value="item.name" >{{ item.name }}</el-radio>
            </el-radio-group>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="btnOK">确定</el-button>
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
      <!-- 分页组件 -->
      <el-row type="flex" align="middle" justify="center" style="height: 60px">
        <el-pagination :page-size="page.pagesize" :current-page="page.page" layout="prev, pager, next" :total="page.total" @current-change="pageChange" />
      </el-row>
    </el-card>
    <!-- 提醒组件 -->
    <el-card v-show="tipsDialogVisible">
      <el-dialog title="提醒" :visible.sync="tipsDialogVisible" width="280px" center :show-close="false">
        <div class="attenInfo">
          <p>系统将通过邮件与短信的形式，对全体员工中存在旷工的考勤进行提醒，该提醒每月仅可发送 1 次。</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSub">我知道了</el-button>
          <el-button @click="tipsDialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
      <!-- 设置组件 -->
    </el-card>
    <AttendanceSet ref="set" @handleCloseModal="handleCloseModal" />
  </div>
</template>

<script>
import attendanceApi from "@/utils/constant/attendance"
import { getAttendancesList, updateAttendance } from "@/api/attendances"
import AttendanceSet from "./components/attendance-set"
import { getDepartments } from "@/api/departments"
export default {
  name: "Attendances",
  components: { AttendanceSet },
  data() {
    return {
      list: [],
      selectData: [],
      stateData: attendanceApi,
      departments: [],
      total: 100,
      attendanceRecord: "",
      monthOfReport: "",
      centerDialogVisible: false,
      tipsDialogVisible: false,
      month: "",
      yearMonth: "",
      loading: false,
      attendInfo: {
        month: "",
        getDate: "",
        getInfo: "",
        name: "",
        counts: "",
        tobeTaskCount: "",
      },
      formData: {
        page: 1,
        pagesize: 10,
        keyword: this.keyword,
        deptID: [], // 性别
        stateID: "",
      },
      page: {
        page: 1,
        pagesize: 10,
        total: 0,
      },
      modifyData: {
        userId: "",
        day: "",
        adtStatu: "",
      },
      dialogForm: {},
    }
  },
  // 创建完毕状态
  created() {
    this.getAttendancesList() // 获取考勤列表
    this.getDepartments() // 获取考勤列表
  },
  methods: {
    show(row, column, cell, event) {
      if(event.srcElement._prevClass == 'cell') return
      let date = new Date()
      date.setFullYear(2020)
      let year = date.getFullYear()
      let parts = column.label.split('/')
      let month = parseInt(parts[0]);
      let day = parseInt(parts[1]);
      let newDate = new Date(year, month-1, day+1)
      let dateString = newDate.toISOString().slice(0,10).replace(/-/g,"")
      this.modifyData.userId = row.id
      this.modifyData.day = dateString
      this.modifyData.departmentId = row.departmentId
      for (let i = 0; i < row.attendanceRecord.length; i++) {
        if (row.attendanceRecord[i].day == this.modifyData.day)  {
          this.modifyData.adtStatu = String(row.attendanceRecord[i].adtStatu)
          column.index = Number(row.attendanceRecord[i].day.slice(6))
        }
      }
      if(this.modifyData.adtStatu !== '') {
        this.attendInfo.getDate = column.index
        this.attendInfo.getInfo = this.modifyData.adtStatu
        this.attendInfo.name = row.username
        this.centerDialogVisible = true
      }
    },
    // 暂时不处理
    handleSub() {
      this.tipsDialogVisible = false
      this.$message.success("提醒成功")
    },
    handleTip() {
      this.tipsDialogVisible = true
    },
    // 设置
    handleSet() {
      this.$refs.set.dialogFormV()
    },
    // 弹框关闭
    handleCloseModal() {
      this.$refs.set.dialogFormH()
    },
    // 获取组织列表
    async getDepartments() {
      const { depts } = (await getDepartments()).data
      this.departments = depts
    },

    // 初始化数据
    async getAttendancesList() {
      this.loading = true
      const { data, monthOfReport, tobeTaskCount } = (
        await getAttendancesList({ ...this.page })
      ).data
      this.list = data.rows // 当前记录
      this.page.total = data.total // 总条数
      this.attendInfo.counts = data.total
      this.attendInfo.month = monthOfReport
      this.attendInfo.tobeTaskCount = tobeTaskCount
      var date = new Date()
      var year = date.getFullYear()
      const month = monthOfReport
      var d = new Date(year, month, 0) // 获取月份
      this.monthOfReport = d.getDate() // 获取日期
      this.yearMonth = year + ("" + month < 10 ? "0" + month : month)
      this.month = monthOfReport
      this.loading = false
    },
    // 确定修改
    async btnOK() {
      this.modifyData.adtStatu = parseInt(this.modifyData.adtStatu)
      await updateAttendance(this.modifyData)
      this.centerDialogVisible = false
      this.getAttendancesList() // 成功之后 重新拉取数据
    },
    // 页码改变
    pageChange(page) {
      this.page.page = page
      this.getAttendancesList() // 获取数据
    }
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    background: linear-gradient(to right, #3e6ef8, #5b8cff);
    border-radius: 10px 10px 0 0;
  }
  .el-dialog__body {
    text-align: center;
  }
}
</style>